<template>
	<view style="background: #FF7300;width: 750rpx;overflow: hidden;min-height:1000rpx;">
		<view style="width: 700rpx;border-radius: 36.24rpx;background: #FFFFFF;margin: 24.77rpx;" @tap="gokecheng">
			<image :src="face_url" style="width: 700rpx;height: 325rpx;vertical-align: middle;border-radius: 36.24rpx 36.24rpx 0 0;"></image>
			<view style="width: 700rpx;padding: 33rpx;box-sizing: border-box;background: #FFFFFF;border-radius: 36.24rpx;">
				<view style="display: flex;align-items: center;height: 40rpx;justify-content: space-between;">
					<view style="font-size: 40rpx;font-weight: bold;height: 60rpx;color: #373737;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;width: 470rpx;">{{pintuan_title}}</view>
					<view style="padding: 15rpx 15rpx;border: 0.5rpx solid #FF7300;border-radius: 30rpx;font-size: 18rpx;background: #FFFFFF;height: 40rpx;line-height: 30rpx;color: #FF7300;display: flex;justify-content: center;align-items: center;position: relative;top: 8rpx;box-sizing: border-box;">
						<text>{{label}}</text>
					</view>
				</view>
				<view style="color: #FF3737;margin: 25rpx 0;">
					<text style="font-size: 20rpx;">￥</text>
					<text style="font-size: 45rpx;font-weight: bold;">{{discount_amout}}</text>
					<text style="font-size: 20rpx;">/节</text>
				</view>
			</view>
		</view>
		<view style="width: 700rpx;box-sizing: border-box;padding: 51rpx 31rpx;background: #FFFFFF;border-radius: 36.24rpx;margin: 24.77rpx;min-height: 497rpx;position: relative;">
			<view style="font-size: 32rpx;font-weight: bold;display: flex;align-items: center;">
				<text>当前已参团人数{{img_list.length}}人</text>
				<view style="margin-left: 10rpx;">
					<daojishi :start_time="shi" :end_time="overdue_time" :fontColor="color"></daojishi>
				</view>
			</view>
			<view style="display: flex;flex-wrap: wrap;margin-top: 30rpx;" >
				<view v-for="(itme,index) in img_list" :key="index" style="margin:0 20rpx 20rpx 0;">
					<image :src="itme" style="width: 70rpx;height: 70rpx;border-radius: 50%;"></image>
				</view>
			</view>
			<view style="position: absolute;top: 350rpx;" v-if="isshow_">
				<button  open-type="share" style="display: block;border: transparent 1rpx solid;padding: 0;margin: 0;background: transparent;border-radius: 45rpx;width: 630rpx;height: 96rpx;background: #FF7300;color: #FFFFFF;" v-if="is_participate">
					邀请好友拼团
				</button>
				<view style="display: block;border: transparent 1rpx solid;padding: 0;margin: 0;background: transparent;border-radius: 36rpx;width: 630rpx;height: 96rpx;background: #FF7300;color: #FFFFFF;line-height: 96rpx;text-align: center;" @tap.stop="jiarupintuan" v-if="!is_participate">
					加入拼团
				</view>
			</view>
		</view>
		<view style="font-size: 28rpx;color: #FFFFFF;width: 750rpx;box-sizing: border-box;padding: 30rpx 31rpx;">
			<p>1.报名同一机构，同一课程，每满4人,可返现5%.最多返现20%每次课程独立计算。</p>
			<p style="margin: 10rpx 0;">2.点击课程包即表示入团，邀请链接有效期24H</p>
			<p>3.团内成员单次课程结束之后，方可算作有效成员.每满4人完成单次课时,即进行一次返现结算</p>
		</view>
		
	</view>
</template>
<script>
	export default {
		onShareAppMessage(res) {
		   if (res.from === 'button') {
		     console.log(res.target)
		   }
		   let that = this
		   return {
		     title: '课程拼单',
			 path: "/pages/Friend/creatGroup/creatGroup?num=" + that.group_id 
		   }
		 },
		data(){
			return {
				color: "#E81E1E",
				activeNames: [0],
				list: [],
				face_url: "",
				pintuan_title: "",
				discount_amout: "",
				original_price: "",
				introduction_content: "",
				mechanism_logo: "",
				label: "",
				mechanism_name: "",
				img: "http://img.curiousmore.com/611089",
				isshow: false,
				img_title: "http://img.curiousmore.com/703018",
				content: "发送验证码",
				canyu_list: "http://img.curiousmore.com/196279",
				group_id: "",
				img_list: [],
				shi: "",
				overdue_time: "",
				shangpin_id: "",
				list_url_lisy: "http://img.curiousmore.com/349316",
				user_id: "",
				is_participate: "",
				disabled: false,
				isshow_: true,
				shuju_obj: {}
			}
		},
		methods:{
				gokecheng(){
					uni.navigateTo({
					    url: '/pages/World/classChannel/classChannel?num=' + encodeURIComponent(JSON.stringify(this.shuju_obj))
					})
				},
				shijian(){
					const shijian = new Date().getTime()
					const chuan = new Date(shijian)
					const nian = chuan.getFullYear()
					const yue = chuan.getMonth() + 1 < 10 ? "0" + (chuan.getMonth() + 1) : chuan.getMonth() + 1
					const ri = chuan.getDate() < 10 ? "0" + chuan.getDate() : chuan.getDate()
					const shi = chuan.getHours() < 10 ? "0" + chuan.getHours() : chuan.getHours()
					const fen = chuan.getMinutes() < 10 ? "0" +  chuan.getMinutes() :  chuan.getMinutes()
					const miao = chuan.getSeconds() < 10 ? "0" + chuan.getSeconds() : chuan.getSeconds()
					this.shi = nian + "-" + yue + "-" + ri + " " + shi + ":" + fen + ":" + miao
					
				},
		async	pingtuan(itme){
				const res = await this.$myRequest({
					url:"/masterSetPrice/queryGroupInfo",
					data: {
						group_id: itme,
						user_id: this.user_id
					}
				})
				if(res.code == 0){
					this.face_url = res.data.face_url
					this.pintuan_title = "【" + res.data.course_num + "节" + "】" + res.data.title
					this.discount_amout =  res.data.discount_amout
					this.original_price = res.data.original_price
					this.introduction_content = res.data.introduction_content
					this.mechanism_logo = res.data.map.mechanismEntity.mechanism_logo
					this.label = res.data.label
					this.mechanism_name = res.data.map.mechanismEntity.mechanism_name
					this.img_list = res.data.map.avatarList
					this.overdue_time = res.data.map.end_time
					this.is_participate = res.data.map.is_participate
					let dang = new Date(this.shi).getTime()
					let end = new Date(res.data.map.end_time).getTime()
					if(dang > end){
						this.isshow_ = false
					}
					this.shuju_obj = res.data
				}
			},
		async	jiarupintuan(){
				if(this.user_id != ""){
					const res = await this.$myRequest({
						url: "/userGrouping/insertUserGrouping",
						methed: "post",
						data: {
							user_id: this.user_id,
							group_id: this.group_id
						},
						header: {
							'content-type' : 'application/json'
						}
					})
					if(res.code == 0){
						uni.showToast({
							title: "加入成功"
						})
						this.img_list = []
						this.pingtuan(this.group_id)
					}else if(res.code == 10049){
						uni.showToast({
							title: res.message
						})
					}else{
						uni.showToast({
							title: "请稍后加入拼团",
							duration: 2000
						})
					}
				}
			}
		},
		onLoad(option) {
			this.group_id = option.num
			this.shijian()
			try{
				 if(uni.getStorageSync('userif_list')){
					this.user_id =  uni.getStorageSync('userif_list').user_id
					this.pingtuan(option.num)
					this.disabled = false
					if(uni.getStorageSync('pintuan')){
						uni.removeStorageSync('pintuan')
					}
				 }else{
					 this.disabled = true
					 uni.showToast({
					 	title: "您未登录未登录",
						icon: "none"
					 })
					 uni.showModal({
					     title: '暂未登录',
					     content: '是否登录',
					     success: function (res) {
					         if (res.confirm) {
								try{
									uni.setStorageSync('pintuan',11)
								}catch(e){}
					            uni.reLaunch({
					 				url:'/pages/tabBer/login/logins?num=' + this.group_id
					            })
					         } else if (res.cancel) {
					             uni.showToast({
					             	title: "取消成功"
					             })
							}
					     }
					 })
				 }
			}catch(e){}
		}
	}
</script>
<style lang="scss" scoped>
	.list{
		width:638rpx ;
	}
	.suofang_{
		animation:mymove  1s linear infinite;
		-webkit-animation:mymove 0.2s ease 1 infinite; /*Safari and Chrome*/
	}
	@keyframes mymove{
		0%{
		transform: scale(1);  /*开始为原始大小*/
		}
		50%{
			transform: scale(1.1);
		}
		100%{
			transform: scale(1);
		}
	}
</style>